<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  	<style type="text/css">
  		body {
  			margin: 0;
  			padding: 0;
  			height: 1024px;
  		}
  		.box1, .box2, .box3 {
  			width: 100%;
  			height: 50px;
  		}
  		/* 
  			相对定位，还处在标准的文档流之中
  			以自己的初始位置为偏移参照
  		*/
  		.box1 {
  			position: relative;
  			z-index: 1;
  			top: 5px;
  			background-color: red;
  		}
  		.box2 {
  		  	position: relative;
  		  	z-index: 5;
  			background-color: yellow;
  		}
  		/* 
  			绝对定位，脱离了标准的文档流
  			绝对定位的元素如果没有设置宽度，则会根据内容自动设置宽度
  			如果没有已经定位的祖先元素，则以根元素为偏移量，即html
  			如果有已经定位的祖先元素，以最近的定位的祖先元素为基准
  		*/
  		.box3 {
  			position: absolute;
  			background-color: blue;
  			bottom: 0;
  		}
  	</style>
  </head>
  
  <body>
  	<div class="box1"></div>
  	<div class="box2"></div>
  	<div class="box3"></div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            console.info("Dom元素加载完毕！");
        });
    </script>
  </body>
</html>